<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Custom consent page - Consent required</title>
  <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}" />
  <script>
    function cancelConsent() {
      document.consent_form.reset();
      document.consent_form.submit();
    }
  </script>
</head>
<body>
<div class="container">
  <div class="row py-5">
    <h1 class="text-center text-primary">App permissions</h1>
  </div>
  <div class="row">
    <div class="col text-center">
      <p>
        The application
        <span class="fw-bold text-primary" th:text="${clientId}"></span>
        wants to access your account
        <span class="fw-bold" th:text="${principalName}"></span>
      </p>
    </div>
  </div>
  <div th:if="${userCode}" class="row">
    <div class="col text-center">
      <p class="alert alert-warning">
        You have provided the code
        <span class="fw-bold" th:text="${userCode}"></span>.
        Verify that this code matches what is shown on your device.
      </p>
    </div>
  </div>
  <div class="row pb-3">
    <div class="col text-center">
      <p>
        The following permissions are requested by the above app.<br/>
        Please review these and consent if you approve.
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col text-center">
      <form name="consent_form" method="post" th:action="${requestURI}">
        <input type="hidden" name="client_id" th:value="${clientId}">
        <input type="hidden" name="state" th:value="${state}">
        <input th:if="${userCode}" type="hidden" name="user_code" th:value="${userCode}">

        <div th:each="scope: ${scopes}" class="form-check py-1">
          <input class="form-check-input"
                 style="float: none"
                 type="checkbox"
                 name="scope"
                 th:value="${scope.scope}"
                 th:id="${scope.scope}">
          <label class="form-check-label fw-bold px-2" th:for="${scope.scope}" th:text="${scope.scope}"></label>
          <p class="text-primary" th:text="${scope.description}"></p>
        </div>

        <p th:if="${not #lists.isEmpty(previouslyApprovedScopes)}">
          You have already granted the following permissions to the above app:
        </p>
        <div th:each="scope: ${previouslyApprovedScopes}" class="form-check py-1">
          <input class="form-check-input"
                 style="float: none"
                 type="checkbox"
                 th:id="${scope.scope}"
                 disabled
                 checked>
          <label class="form-check-label fw-bold px-2" th:for="${scope.scope}" th:text="${scope.scope}"></label>
          <p class="text-primary" th:text="${scope.description}"></p>
        </div>

        <div class="pt-3">
          <button class="btn btn-primary btn-lg" type="submit" id="submit-consent">
            Submit Consent
          </button>
        </div>
        <div class="pt-3">
          <button class="btn btn-link regular" type="button" id="cancel-consent" onclick="cancelConsent();">
            Cancel
          </button>
        </div>
      </form>
    </div>
  </div>
  <div class="row pt-4">
    <div class="col text-center">
      <p>
        <small>
          Your consent to provide access is required.<br/>
          If you do not approve, click Cancel, in which case no information will be shared with the app.
        </small>
      </p>
    </div>
  </div>
</div>
</body>
</html>